import React, { useEffect, useMemo, useState } from 'react';
import s from './style.module.css';
import Button from '@knownsec/react-component/dist/Button';
import Dialog from '@knownsec/react-component/dist/Dialog';
import Input from '@knownsec/react-component/dist/Input';
import Textarea from '@knownsec/react-component/dist/Textarea';
import Loading from '@knownsec/react-component/dist/Loading';
import cn from 'classnames';
import { datetime } from '../../../common/formatter';
import EmptyData from '../empty/EmptyData';
import fetchFer from 'API/fetch'

function UrlDetailDialog ({
	id = null,
	type = '',
	overview,
	buttonText,
	title,
	className,
}) {
	const [visible, setVisible] = useState(false)
	const [data, setData] = useState([])
	const [searchUrl, setSearchUrl] = useState('')
	const [loading, setLoading] = useState(false)
	const getData = () => {
		setVisible(true)
		setLoading(true)
		fetchFer(`/api/v2/tasks/monitor/urls?query_id=${id}&query_type=${type}`).then(res => {
			if (res.code === 200) {
				setData(res?.data)
			}
		}).finally(() => {
			setLoading(false)
		})
	}
	const searchData = useMemo(() => {
		if (data?.length) {
			if (searchUrl) {
				return data?.reduce((t, item) => {
					if (item.indexOf(searchUrl) > -1) {
						t.push(item)
					}
					return t
				}, [])?.join('\n')
			} else {
				return data?.join('\n')
			}
		}
	}, [data, searchUrl])
	const downFun = () => {
		fetch(`/api/v2/tasks/export/monitor/urls?query_id=${id}&query_type=${type}`)
			.then(res => {
				if (res.ok) {
					return res.blob();
				}
			})
			.then(blob => {
				const body = document.querySelector('body');
				const url = window.URL.createObjectURL(blob);
				const a = document.createElement('a');
				a.download = `urls.xlsx`;
				a.href = url;
				setTimeout(function () {
					body.appendChild(a);
					a.click();
					body.removeChild(a);
					window.URL.revokeObjectURL(a.href);
				}, 500);
			})
			.catch(error => {
				return {};
			});
	};
	return (
		<>
			<Button
				onClick={() => {
					getData()
				}}
				type="text"
				className={cn('p0', className)}
			>
				{buttonText || '查看详情'}
			</Button>
			<Dialog
				title={
					<div>
						<span>{title || '检测URL详情'}</span>
					</div>
				}
				className={s.dialog}
				visible={visible}
				cancelText=""
				onhide={() => {
					setVisible(false);
				}}
				onsubmit={() => {
					setVisible(false);
				}}
			>
				<div
					className="p24 content-box pr"
					style={{ overflow: 'hidden auto' }}
				>
					<Loading show={loading} label='' />
					<div className='df aic jcsb mb20'>
						<Input search inline placeholder='请输入URL' value={searchUrl} onChange={({ value }) => setSearchUrl(value)}></Input>
						<div className='df aic'>
							<div className='mr10'>URL共{overview?.url_count}条，共检测{overview?.scan_count}次</div>
							<div onClick={() => downFun()} className='main-color fs12 cp'>
								<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
									<g id="资产" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
										<g id="监测任务管理-Web安全监测详情-漏洞" transform="translate(-1337.000000, -101.000000)" fill="#0B6FD6" fill-rule="nonzero">
											<g id="编组-6" transform="translate(227.000000, 97.000000)">
												<g id="编组-5" transform="translate(1110.000000, 0.000000)">
													<g id="218下载、导入" transform="translate(0.000000, 4.000000)">
														<path d="M3.64583333,8.16666667 L6.41666667,8.16666667 L6.41666667,0 L7.58333333,0 L7.58333333,8.16666667 L10.3541667,8.16666667 L7,11.6666667 L3.64583333,8.16666667 Z M14,7 L12.8333333,7 L12.8333333,12.8333333 L1.16666667,12.8333333 L1.16666667,7 L0,7 L0,14 L14,14 L14,7 Z" id="形状"></path>
													</g>
												</g>
											</g>
										</g>
									</g>
								</svg>
								<span className='ml5'>下载明细</span>
							</div>
						</div>
					</div>
					<div className={cn('bd p10', s.h292)}>
						{searchData || <EmptyData borderless className={'h100p'} />}
					</div>
				</div>
			</Dialog>
		</>
	);
}
export default UrlDetailDialog;
